<template>
  <el-dialog title="创建用户" :visible="showDialog" @close="handleclose">
    <!-- 表单 -->
    <el-form ref="form" label-width="120px" :model="userForm" :rules="rules">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="userForm.username" style="width:80%" placeholder="请输入姓名" />
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="userForm.email" style="width:80%" placeholder="请输入邮箱" />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="userForm.password" style="width:80%" placeholder="请输入密码" />
      </el-form-item>
      <el-form-item label="角色" prop="role">
        <el-input v-model="userForm.role" style="width:80%" placeholder="请输入角色" />
      </el-form-item>
      <el-form-item label="权限组名称" prop="permission_group_id">
        <el-select v-model="userForm.permission_group_id" style="width:80%" placeholder="请选择">
          <el-option v-for="item in limitNewList" :key="item.id" :label="item.title" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="联系电话" prop="phone">
        <el-input v-model="userForm.phone" style="width:80%" placeholder="请输入联系电话" />
      </el-form-item>
      <el-form-item label="介绍">
        <el-input v-model="userForm.introduction" style="width:80%" placeholder="介绍" />
      </el-form-item>

    </el-form>
    <!-- footer插槽 -->
    <template v-slot:footer>
      <el-button @click="handleclose">取消</el-button>
      <el-button type="primary" @click="handleAdd">确定</el-button>
    </template>
  </el-dialog>
</template>

<script>
import { addUserAPI, limitListAPI } from '@/api/user'
export default {
  name: 'AddUser',
  //   父传子
  props: {
    showDialog: {
      type: Boolean,
      default: false
    }

  },
  data() {
    return {
      rules: {},
      query: {
        page: '1',
        pagesize: '10',
        keyword: ''
      },
      // 权限组id数组
      limitNewList: [],
      //  员工表单
      userForm: {
        type: Object,
        default: () => {
          return {
            avatar: '',
            email: '1234567891@qq.com',
            introduction: '111',
            password: '123456',
            permission_group_id: 4,
            phone: '18299008899',
            role: '1',
            username: '她的睫毛'
          }
        }

      }

    }
  },
  created() {
    this.limitList()
  },
  methods: {
    async limitList() {
      const resp = await limitListAPI(this.query)
      console.log(resp)
      this.limitNewList = resp.list
    },
    handleclose() {
      // 子传父通知父组件关闭弹窗
      this.$emit('handleclose', this.showDialog)
    },
    // 新增员工
    async  handleAdd() {
      try {
        const r = await addUserAPI(this.userForm)
        console.log(r)
        this.$refs.form.resetFields()
        this.handleclose()
        // 子传父通知父组件重新获取列表
        this.$emit('getUserList')
      } catch (err) {
        this.$message.error(err.message)
      }
    }

  }}
</script>

<style lang="scss" scoped >

    </style>

